<!--
 * @Author: Neko
 * @Date: 2021-06-03 13:43:53
 * @LastEditTime: 2021-06-17 16:01:38
 * @LastEditors: Neko
-->
<template>
  <u-popup v-model="isShowPopup" mode="right" length="670">
    <scroll-view class="filterer__container">
      <view v-if="propertyData.isOpenPrice" class="filterer__section">
        <view class="filterer__title">
          <span class="title">{{ $t('locales.priceBetween') }}</span>
        </view>

        <view class="filterer__content price">
          <u-input v-model="listFilter.startPrice" :placeholder="$t('locales.minPrice')" :custom-style="customStyle" />

          <text class="seperator">-</text>

          <u-input v-model="listFilter.endPrice" :placeholder="$t('locales.maxPrice')" :custom-style="customStyle" />
        </view>
      </view>

      <view v-if="propertyData.isOpenBrand && brandSubMenu.length" class="filterer__section">
        <view class="filterer__title">
          <text class="title">{{ $t('locales.brandSimple') }}</text>

          <view class="brand">
            <text class="brand-name">{{ brandNameList.join('、') }}</text>
            <text v-if="isShowExpand" class="expand" @click="onClickExpandBtn">
              {{ isExpanded ? $t('locales.packUp') : $t('locales.expand') }}
              <u-icon class="icon" name="arrow-down" />
            </text>
          </view>
        </view>

        <view class="filterer__content brand">
          <BrandItem
            v-for="item in brandSubMenu"
            :key="item.value"
            class="brand-item"
            :src="item.image"
            :active="(listFilter.brandIdList || []).includes(item.value)"
            @click="onClickBrandItem(item)"
          />
        </view>
      </view>

      <template v-if="propertyData.isOpenAttribute && propertiesList.length">
        <view v-for="item in propertiesList" :key="item.name" class="filterer__section">
          <view class="filterer__title">
            <text class="title">{{ item.name }}</text>
          </view>

          <view class="filterer__content properties">
            <PropertyLabel
              v-for="inner in item.submenu"
              :key="inner.value"
              class="property-label"
              :active="listFilter.attributeValueIdList.includes(inner.value)"
              @click="onClickPropertyItem(inner)"
            >
              {{ inner.name }}
            </PropertyLabel>
          </view>
        </view>
      </template>

      <view class="filterer__buttons">
        <view class="button" @click="onClickResetBtn">{{ $t('locales.eliminate') }}</view>
        <view class="button primary" @click="onClickConfirmBtn">{{ $t('locales.determine') }}</view>
      </view>
    </scroll-view>
  </u-popup>
</template>

<script>
import BrandItem from '@/components/brandItem/index.vue'
import PropertyLabel from '@/components/propertyLabel'

export default {
  components: {
    BrandItem,
    PropertyLabel
  },

  props: {
    filterData: {
      type: Array,
      default: () => ([])
    },

    propertyData: {
      type: Object,
      default: () => ({})
    },

    selectedFiltererData: {
      type: Object,
      default: () => ({
        startPrice: '',
        endPrice: '',
        brandIdList: [],
        attributeValueIdList: []
      })
    }
  },

  data() {
    return {
      isShowPopup: false,

      customStyle: {
        'flex': 1,
        height: '64rpx',
        'line-height': '64rpx',
        'border-radius': '12rpx',
        'background-color': '#f4f4f4',
        'text-align': 'center',
        'font-size': '24rpx'
      },

      listFilter: {
        startPrice: '',
        endPrice: '',
        brandIdList: [],
        attributeValueIdList: []
      },

      isExpanded: false
    }
  },

  computed: {
    brandList() {
      return this.filterData.find(current => current.__type === 'brand')
    },

    propertiesList() {
      return this.filterData.filter(current => current.__type === 'custom')
    },

    brandNameList() {
      const brandList = (this.brandList ? ((this.brandList.submenu[0] || {}).submenu || []) : [])

      if (!this.listFilter.brandIdList) return []

      const map = (this.listFilter?.brandIdList || []).reduce((prev, current) => {
        const found = brandList.find(inner => inner.value === current)

        if (found) {
          prev.push(found.name)
        }

        return prev
      }, [])

      return map
    },

    isShowExpand() {
      const brandList = this.brandList ? (((this.brandList.submenu[0] || {}).submenu) || []) : []

      return brandList.length > 9
    },

    brandSubMenu() {
      const brandList = (this.brandList ? ((this.brandList.submenu[0] || {}).submenu || []) : [])

      if (!this.isExpanded) {
        return brandList.slice(0, 9)
      }

      return brandList
    }
  },

  watch: {
    selectedFiltererData: {
      deep: true,
      handler() {
        this.listFilter = JSON.parse(JSON.stringify(this.selectedFiltererData))
      }
    }
  },

  methods: {
    open() {
      this.isShowPopup = true
    },

    onClickBrandItem(item) {
      if (this.listFilter.brandIdList) {
        if (this.listFilter.brandIdList.includes(item.value)) {
          const findIndex = this.listFilter.brandIdList.findIndex(current => current === item.value)

          if (findIndex > -1) {
            this.listFilter.brandIdList.splice(findIndex, 1)
          }
        } else {
          this.listFilter.brandIdList.push(item.value)
        }
      } else {
        this.listFilter.brandIdList = [item.value]
      }
      
      
      this.$emit('click-item', this.listFilter.brandIdList)
    },

    onClickPropertyItem(inner) {
      if (this.listFilter.attributeValueIdList.includes(inner.value)) {
        const findIndex = this.listFilter.attributeValueIdList.findIndex(current => current === inner.value)

        if (findIndex > -1) {
          this.listFilter.attributeValueIdList.splice(findIndex, 1)
        }
      } else {
        this.listFilter.attributeValueIdList.push(inner.value)
      }
    },

    onClickExpandBtn() {
      this.isExpanded = !this.isExpanded
    },

    onClickResetBtn() {
      this.listFilter = {
        startPrice: '',
        endPrice: '',
        brandIdList: [],
        attributeValueIdList: []
      }
      this.$emit('reset', this.listFilter)

      this.isShowPopup = false
    },

    onClickConfirmBtn() {
      if (isNaN(+this.listFilter.startPrice) || isNaN(+this.listFilter.endPrice)) {
        return uni.showToast({
          title: this.$t('locales.incorrectPriceValue'),
          icon: 'none'
        })
      }

      if (this.listFilter.startPrice > this.listFilter.endPrice) {
        return uni.showToast({
          title: this.$t('locales.incorrectPriceRange'),
          icon: 'none'
        })
      }

      this.$emit('confirm', this.listFilter)

      this.isShowPopup = false
    }
  }
}
</script>

<style lang="scss" scoped>
.filterer__container {
  position: relative;
  padding: 19rpx 35rpx 80rpx;
  box-sizing: border-box;

  .filterer__section {
    padding: 46rpx 0 0;
    border-bottom: 2rpx solid #f5f5f5;
    
    .filterer__title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 34rpx;
      font-size: 26rpx;
      font-weight: bold;

      .title {
        flex-shrink: 0;
        margin-right: 40rpx;
      }

      .brand {
        display: flex;
        font-size: 22rpx;
        font-weight: normal;
        color: #888888;

        .brand-name {
          flex-basis: 416rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #001CAC;
        }

        .expand {
          flex-shrink: 0;
          margin-left: 6rpx;

          .icon {
            margin-left: 8rpx;
          }
        }
      }
    }

    .filterer__content {
      padding-bottom: 50rpx;
      
      &.price {
        display: flex;
        align-items: center;

        .seperator {
          margin: 0 16px;
        }
        
      }

      &.brand {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding-bottom: 34rpx;
        

        .brand-item {
          margin-right: 26rpx;
          margin-bottom: 16rpx;

          &:nth-of-type(3n + 3) {
            margin-right: 0;
          }
        }
      }

      &.properties {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding-bottom: 26rpx;

        .property-label {
          margin-bottom: 24rpx;
          margin-right: 24rpx;

          &:nth-of-type(3n + 3) {
            margin-right: 0;
          }
        }
      }
    }
  }

  .filterer__buttons {
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    width: 100%;

    .button {
      width: 50%;
      border-top: 1px solid #DDDDDD;
      font-size: 28rpx;
      text-align: center;
      line-height: 90rpx;
      color: #000;
      background: #fff;
      

      &.primary {
        font-weight: bolder;
        background: #0049AC;
        border-color: #0049AC;
        color: #fff;
      }
    }
  }
}
</style>